<template>
  <div class="">
    <header>
      <!-- 登录头部设置 返回登录页 -->
      <van-nav-bar title="嗨购登录" left-arrow @click-left="$router.back()">
        <template #left>
          <van-icon name="arrow-left" size="25" color="black" />
        </template>
      </van-nav-bar>
    </header>

    <main>
      <!-- 设置输入框信息 -->
      <van-cell-group>
        <van-field
          v-model="tel"
          label="手机号"
          placeholder="请输入手机号"
          autofocus
        />
      </van-cell-group>
      <van-cell-group>
        <van-field v-model="password" label="密码" :type="flag?'password':'text'" placeholder="请输入密码" :right-icon="flag?'closed-eye':'eye-o'" @click-right-icon="flag=!flag" clearable/>

  
      </van-cell-group>
      <!-- 登录按钮设置 -->
      <div class="loginBtn">
        <van-button type="danger" round size="large" @click="login"
          >登录</van-button
        >
        <router-link to="/register">去注册</router-link>
      </div>
    </main>
  </div>
</template>

<script>
import { doLogin } from "../api/user";
import Vue from "vue";
import { Field, Cell, CellGroup, Button, Toast } from "vant";
Vue.use(Field);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Button);
Vue.use(Toast);
export default {
  data() {
    return {
      tel: "",
      password: "",
      flag:true
    };
  },
  //登录页完成成功登录跳转，不成功进行判断提示
  methods: {
    login() {
      doLogin({ loginname: this.tel, password: this.password }).then((res) => {
        console.log(res.data.code);
        switch (res.data.code) {
          case "10010":
            Toast("该用户名不存在");
            break;
          case "10011":
            Toast("密码有误，请重新输入");
            break;
          case "200":
            localStorage.setItem("token", res.data.data.token);
            localStorage.setItem("userid", res.data.data.userid);
            this.$router.push("/home");
            break;
          default:
            break;
        }
      });
    },
  },
};
</script>

<style scoped>
.loginBtn {
  width: 90%;
  margin: 20px auto;
}
</style>